@include('common.header')
<script type="text/javascript">
	
	// 获取父类相对应的子类列表 
	// 参数：id值 id = 'category_1'
	var i=2;
	function getSonCategory( id )
	{
		// 将当前下拉框 以下的其他下拉框 全部清除
		$("#"+id).nextAll().remove();
		// 获取当前选择的分类id		
		var category_id	=	$("#"+id).val();	
		// 0代表根类 没有选择子类 
		if( category_id==0 )
		{					
			return false;
		}
		// 按'_'分割 获取字母部分 category
		var arr = id.split('_'); 	
		// 给 下一级 下拉框 新的id名( category_2 )
		var new_id= arr[0]+'_'+i;	
		// 获取相对应的子类列表 
		$.ajax({
			type:"post",
			url:"{{ url('/getSonCategory') }}",
			data:{category_id:category_id,new_id:new_id,_token:_token},
			async:false,    						
			dataType:"html",
			success:function(back)
			{
				if( back!='' )
				{
					// 同辈后追加
					$('#'+id).after(back);
					i++;
				}
			}
		});
	}
	
	
	
	$(function()
	{ 
		// 一进入页面就找一级分类下的子分类
		getSonCategory('category_1');
	});
		
		
</script>


<div class="row" style="width:100%;margin-top:5%;" >
	<div class="col-md-6" style="text-align:center;" >
		<!-- 页面标记  -->
		<div style="margin:30px;margin-left:-5px;color:green;font-size:22px;">
		@if( isset($sku_info) )
			编辑商品
		@else
			添加商品
		@endif
		</div>
		
	</div>
	<div class="col-md-6">
	</div>
</div>


<div class="row" style="width:100%;margin:0 auto;" >
	<div class="col-md-2">
	</div>
	<div class="col-md-10">
	
		<!-- 添加 sku 表单  -->
		
		<!-- 选择分类 -->
		<div  class="form-group">
			<label class="col-sm-1">栏目</label>
			<div class="col-sm-11">
				<!-- 编辑商品 -->
				@if( isset($sku_info->id) )
					
					<!-- 遍历所有层级 依次选中 例:1,2,3,4 
					$category_info
					1 => array:2 [▼
						"category_name" => "汽车"
						"id" => 1
					  ] -->
					@forelse( $category_path as $key => $category_info )
						
						<!-- 第一个分类下拉框 -->
						@if( $key==1 )
							<select style="width:auto;float:left;" class="form-control" id="category_{{ $key }}" onchange="getSonCategory('category_{{ $key }}');" >
								<!--第一级分类先选中 -->
								<option value="{{ $category_info['id'] }}" selected >
									{{ $category_info['category_name']  }}
								</option>
							</select>
						@else
						<!-- 第二个及以后分类下拉框 -->
						<script type='text/javascript'>
							$(function(){
								var id = {{ $key }};
								var cid = {{ $category_info['id'] }};
								// ajax必须同步才可以选中 异步会选不中
								$( "#category_"+id ).val(cid);
								getSonCategory("category_"+id);
							}); 
						</script>
						@endif
					@empty
					@endforelse
				
				@else
					<!-- 创建 商品 -->
					<select style="width:auto;float:left;" class="form-control" id="category_1" onchange="getSonCategory('category_1');" >
						@forelse( $all_first_category as $key => $categor )
							<option value="{{ $categor->id }}" >{{ $categor->name }}</option>
						@empty
						@endforelse
					</select>
				@endif
			</div>
		</div>
	
	
		<br/><br/>
		<!-- 标题 -->
		<div  class="form-group">
			<label class="col-sm-1">标题</label>
			<div class="col-sm-11">
				<input style="width:430px;" type="text" name="name" value="{{ $sku_info->name or '' }}" class="form-control"  placeholder="标题" />
			</div>
		</div>
	
	
		<br/><br/>
		<!-- 标签 -->
		<div  class="form-group">
		  <label class="col-sm-1 control-label">标签</label>
		  <div class="col-sm-11">
			<input style="width:430px;" type="text" name="tags" value="{{ $tag_str or '' }}" class="form-control"  placeholder="标签	请按逗号 ',' 分割" />
		  </div>
		</div>
		
		
		
		<br/><br/>
		<!-- 标价 -->
		<div  class="form-group">
			<label class="col-sm-1 control-label">标价</label>
			<div class="col-sm-2">
				<input style="width:150px;" type="text" name="price" value="{{ $sku_info->price or '' }}" class="form-control"  placeholder="标价" />
			</div>
			<div class="col-sm-1">
				<div style="padding-top:5px;font-weight:bold;" >VIP:</div>
			</div>
			<div class="col-sm-8" style="margin-left:-30px;" >
				<input style="width:150px;" type="text" name="vip" value="{{ $sku_info->vip or '' }}" class="form-control"  placeholder="vip会员价" />
			</div>
		</div>
	

		<br/><br/>
		<!-- 商品详情内容 -->
		<div  class="form-group" style="margin-bottom:20px;" >
			<label class="col-sm-1 control-label">详情</label>
			<div class="col-sm-11">
				请至少输入两段商品描述 并 上传一张商品相关图片
				<!-- 加载编辑器的容器 -->
				<script id="container" name="content"  style='height:260px;width:650px;' type="text/plain">{!! $sku_info->content or '' !!}</script>
				<!-- 配置文件 -->
				<script type="text/javascript" src="{{ asset('/js/uedit/ueditor.config.js') }}"></script>
				<!-- 编辑器源码文件 -->
				<script type="text/javascript" src="{{ asset('/js/uedit/ueditor.all.js') }}"></script>
				<!-- 实例化编辑器 -->
				<script type="text/javascript">
					var ue = UE.getEditor('container',{ 
						toolbars: [
							[
								'indent', //首行缩进
								'undo', //撤销
								'bold', //加粗
								'horizontal', //分隔线
								'time', //时间
								'date', //日期
								'fontfamily', //字体
								'fontsize', //字号
								'simpleupload', //单图上传
								// 'insertimage', //多图上传
								'justifyleft', //居左对齐
								'justifyright', //居右对齐
								'justifycenter', //居中对齐
								'justifyjustify', //两端对齐
								'insertorderedlist', //有序列表
								'insertunorderedlist', //无序列表
								'fullscreen', //全屏
							]
						]
						
					});
				</script>
			</div>
			
		</div>
		
		
		<div  style="overflow:hidden;width:100%;padding-top:30px;">
   
			<button  style="width:200px;float:left;" class="btn btn-danger">保存</button>
			<div style="margin-left:50px;float:left;margin-bottom:200px;">
				<a href="javascript:" onclick="self.location=document.referrer;"  style="width:200px;" class="btn btn-success">
				返回
				</a>
			</div>
			
		</div>
		
		
	</div>
</div>
	
	
<div id="sku" sku="{{ $sku_info->id or '' }}" ></div>


<script type="text/javascript">
		
	$(function()
	{
		
		// 商品编辑时 获取 sku
		var sku = $("#sku").attr('sku');
		// 执行 创建 编辑 资讯
		$("button").click(function()
		{
			
			// 定义 接收分类数组
			var category = [];	
			// 定义下标 
			var num=1;	
			// 获取每个下拉框的选中值			
			$("select option:selected").each(function()
			{
				var category_id= $(this).val();
				// 栏目分类
				category[num] = parseInt(category_id);
				num++;
				
			});	
			num=1;
			
			// 标题
			var name	=	$("input[name='name']").val();
			// 标签
			var tags	=	$("input[name='tags']").val();
			// 标价
			var price	=	$("input[name='price']").val();
			// vip会员价
			var vip	=	$("input[name='vip']").val();
			// 资讯
			var content = ue.getContent();
			
			$.ajax({ 
				type : 'post', 
				url : "{{ url('/skuAdd') }}",
				data :{category:category,name:name,tags:tags,price:price,vip:vip,content:content,sku:sku,_token:_token}, 
				async:true,    					
				dataType:"json",
				success : function(back)
				{ 
					if( back['show_info'].indexOf("成功") > 0 )
					{
						$("button").attr('disabled',true);
					}
					$(".opa").html(back['show_info']);
					$(".opa").slideDown(1000);
					$(".opa").delay(1500).slideUp(1000);
				}
			});
			
		});
	});

</script>


@extends('common.footer')